<template>
  <view class="page-container">
    <!-- <backView /> -->
    <!-- 页面标题 -->
    <view class="bg-[#27c530] text-white p-[30rpx] rounded-b-[20rpx]">
      <text class="text-[32rpx] font-bold text-center block">个人简介</text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="flex-center py-20">
      <text class="text-gray-500">加载中...</text>
    </view>

    <!-- 护士详情 -->
    <view v-else-if="nurseInfo" class="nurse-detail">
      <!-- 头部信息 -->
      <view class="header-card">
        <view class="flex items-start gap-4">
          <!-- 头像 -->
          <image 
            :src="nurseInfo.avatar || defaultAvatar" 
            mode="aspectFill" 
            class="avatar"
          ></image>
          
          <!-- 基本信息 -->
          <view class="flex-1">
            <view class="flex items-center gap-2 mb-2">
              <text class="name">{{ nurseInfo.name }}</text>
              <view class="sex-tag" :class="nurseInfo.sex === '1' ? 'male' : 'female'">
                <text class="text-[24rpx]">{{ nurseInfo.sex === '1' ? '男' : '女' || '未知' }}</text>
              </view>
            </view>
            
            <!-- <view class="info-item">
              <text class="label">手机：</text>
              <text class="value">{{ nurseInfo.phone || '未填写' }}</text>
            </view> -->
            
            <view class="info-item">
              <text class="label">服务次数：</text>
              <text class="value">{{ nurseInfo.serverNumber || 0 }}次</text>
            </view>
            
            <view class="info-item" v-if="nurseInfo.rate">
              <text class="label">评分：</text>
              <text class="value text-orange-500">{{ nurseInfo.rate }}分</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 个人简介 -->
      <view class="info-card" v-if="nurseInfo.profile">
        <view class="card-title">个人简介</view>
        <view class="profile-content">
          <text class="profile-text">{{ getProfile(nurseInfo.profile) }}</text>
        </view>
      </view>

      <!-- 执业信息 -->
      <view class="info-card">
        <view class="card-title">执业信息</view>
        <view class="info-grid">
          <!-- <view class="grid-item">
            <text class="grid-label">身份证号</text>
            <text class="grid-value">{{ formatIdCard(nurseInfo.idcard) }}</text>
          </view> -->
          
          <view class="grid-item">
            <text class="grid-label">状态</text>
            <text class="grid-value" :class="nurseInfo.status === '1' ? 'text-green-600' : 'text-gray-400'">
              {{ nurseInfo.status_dictText || '未知' }}
            </text>
          </view>
          
          <view class="grid-item">
            <text class="grid-label">是否显示</text>
            <text class="grid-value">{{ nurseInfo.isShow_dictText || '未知' }}</text>
          </view>
          
          <view class="grid-item">
            <text class="grid-label">是否专家</text>
            <text class="grid-value">{{ nurseInfo.isExpert_dictText || '否' }}</text>
          </view>
          
          <view class="grid-item" v-if="nurseInfo.fee">
            <text class="grid-label">服务费用</text>
            <text class="grid-value text-red-500">¥{{ nurseInfo.fee }}</text>
          </view>
          
          <view class="grid-item" v-if="nurseInfo.life">
            <text class="grid-label">工作年限</text>
            <text class="grid-value">{{ nurseInfo.life }}年</text>
          </view>
        </view>
      </view>

      <!-- 地区信息 -->
      <view class="info-card" v-if="nurseInfo.areaName">
        <view class="card-title">服务区域</view>
        <view class="area-content">
          <text class="area-text">{{  getArea(nurseInfo.areaName) }}</text>
        </view>
      </view>

      <!-- 底部操作按钮 -->
      <view class="fixed-bottom">
        <view class="flex gap-3 px-4 py-3">
          <nut-button 
            type="default" 
            class="flex-1"
            @click="onContact"
          >
            联系护士助理
          </nut-button>
          <nut-button 
            type="primary" 
            class="flex-1"
            @click="onSelectNurse"
          >
            选择护士
          </nut-button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="flex-center py-20">
      <text class="text-gray-500">暂无数据</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { request } from "@/service/request";
import Taro from "@tarojs/taro";
import defaultAvatar from "@/assets/img/bao.png";
// import backView from "@/components/backView.vue";

const nurseInfo = ref(null);
const loading = ref(false);
const nurseId = ref("");

// 获取护士详情
const getNurseDetail = async (id) => {
  try {
    loading.value = true;
    // console.log("获取护士详情, id:", id);
    
    const res = await request.get(`/nurse_nurses/nurseNurses/queryById`, { id }, {
      useErrMsg: true
    });
    
    // console.log("护士详情数据:", res);
    
    if (res.success) {
      nurseInfo.value = res.success;
    } else {
      Taro.showToast({
        title: '获取护士详情失败',
        icon: 'none'
      });
    }
  } catch (error) {
    // console.error("获取护士详情失败:", error);
    Taro.showToast({
      title: '获取护士详情失败',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 格式化身份证号（隐藏中间部分）
const formatIdCard = (idcard) => {
  if (!idcard || idcard.length < 8) return idcard || '未填写';
  return idcard.substring(0, 6) + '********' + idcard.substring(idcard.length - 4);
};

// 联系护士助理
const onContact = () => {
  const phoneNumber = '19195847260';
  
  Taro.showModal({
    title: '联系护士助理',
    content: `是否拨打护士助理电话：${phoneNumber}？`,
    success: (res) => {
      if (res.confirm) {
        Taro.makePhoneCall({
          phoneNumber: phoneNumber
        });
      }
    }
  });
};

// 选择护士
const onSelectNurse = () => {
  // console.log('选择护士:', nurseInfo.value);
  
  Taro.showModal({
    title: '确认选择',
    content: `确定选择护士"${nurseInfo.value.name}"吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 这里添加选择护士的业务逻辑
        Taro.showToast({
          title: '已选择护士',
          icon: 'success'
        });
        
        // 返回上一页并传递数据
        setTimeout(() => {
          Taro.navigateBack();
        }, 1500);
      }
    }
  });
};

const getArea = (str)=>{
  const ary = str.split("-");
  ary.pop();
  return ary.join("-")
}

const getProfile = (str) => {
  // 根据换行符分割字符串
  const ary = str.split(/↵|\n|\r\n/);
  
  // 过滤掉空字符串
  let filteredAry = ary.filter(item => item.trim() !== '');
  
  // console.log("分割后的数组:", filteredAry);
  
  // 去掉邮箱，去掉科室 信息， 返回数组
  filteredAry = filteredAry.filter(item => !item.includes('邮箱') && !item.includes('科室'));
  return filteredAry.join("\n");
}

onMounted(() => {
  // 获取路由参数
  const instance = Taro.getCurrentInstance();
  nurseId.value = instance.router?.params?.id || '';
  
  if (nurseId.value) {
    getNurseDetail(nurseId.value);
  } else {
    Taro.showToast({
      title: '缺少护士ID',
      icon: 'none'
    });
  }
});
</script>

<style lang="scss">
.page-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 160rpx;
}

.nurse-detail {
  padding: 32rpx;
}

.header-card {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
  }

  .name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .sex-tag {
    padding: 4rpx 16rpx;
    border-radius: 8rpx;
    
    &.male {
      background: #e3f2fd;
      color: #2196f3;
    }
    
    &.female {
      background: #fce4ec;
      color: #e91e63;
    }
  }

  .info-item {
    font-size: 28rpx;
    color: #666;
    margin-top: 12rpx;
    
    .label {
      color: #999;
    }
    
    .value {
      color: #333;
    }
  }
}

.info-card {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 2rpx solid #f0f0f0;
  }
}

.profile-content {
  .profile-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.8;
    white-space: pre-wrap;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;

  .grid-item {
    display: flex;
    flex-direction: column;
    gap: 8rpx;

    .grid-label {
      font-size: 24rpx;
      color: #999;
    }

    .grid-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.area-content {
  .area-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
}
</style>

